<template>
	<div class="view_box">
		<div class="type">
			<span>|</span><span>课程</span>
		</div>
		<div class="bottom">
			<el-row :gutter="20" v-for="(item,index) in state.courseList">
				<el-col :span="6" v-for="(item1,index1) in item">
					<el-card shadow="hover" @click="toCoursewareDetail(item1.id)">
						<div class="course">
							<el-icon style="font-size: 50px">
								<Management/>
							</el-icon>
							<div class="info">
								<span>{{ item1.name }}</span>
								<span>{{ item1.nickname }}</span>
							</div>
						</div>
					</el-card>
				</el-col>
			</el-row>
		</div>

	</div>
</template>
<script setup lang="ts">

import {onBeforeMount, onMounted, provide} from "vue";
import api from "@/api";
import {reactive} from "vue-demi";
import {Management} from "eleicon";
import {useDataStore} from "@/stores/useDataStore";
import router from "@/router";
import Utils from "utils";


onMounted(async () => {
	await getCourseList();
});

const state = reactive({
	courseList: [][4] as Array<Array<number>>,
	courseIds: []
})


const getCourseList = async () => {
	const res = await api.GetCourseList({});
	if (res.data.code === 200) {
		state.courseList = Utils.groupArray(res.data.data, 4);
		// state.courseIds = res.data.data((item: { id: any; }) => {
		// 	return item.id;
		// })
		console.log(state.courseIds)
	}
};


const toCoursewareDetail = (id: number) => {
	router.push({
		path: '/system/coursewareDetail',
		query: {
			courseId: id
		}
	})

}

</script>
<style scoped lang="scss">
.view_box {
	height: calc(100% - 94px);
	width: 100%;
	box-sizing: border-box;

	.type {
		margin: 0 0 20px 5px;

		span {
			font-size: 16px;
			font-weight: 500;
			color: grey;
		}

		span:nth-child(1) {
			margin-right: 5px;
		}
	}

	.bottom {
		height: 75vh;
		overflow-y: scroll;
		overflow-x: hidden;

		.el-row {
			margin-bottom: 20px;

			.el-card {
				height: 10vh;

				.course {
					display: flex;
					.info {
						display: flex;
						flex-direction: column;
						margin-left: 5px;
						font-size: 15px;

						span:nth-child(2) {
							font-size: 12px;
							color: grey;
						}
					}
				}


			}
		}

		.el-row:last-child {
			margin-bottom: 0;
		}

	}
}

</style>